<template>
    <div class="cont">
        <nav-bar :title="robotCfg.mac_title || ''" rightImg="https://h5.dhcc.wang/newprogram/wxRobot/nav_refresh.png"
            :bgStyle="bgStyle" :text-color="main_color ? '#ffffff' : '#333333'" :rotate.sync="reload" @leftClick="back"
            @rightClick="refresh" />
        <div v-if="robotCfg" :style="{ background: bgStyle, backgroundSize: '100%' }" class="cont-main">
            <div class="flex align-center font-11 expireTips"
                v-if="robotCfg.device_info && robotCfg.device_info.expires_time && expireTimeDay">
                <van-icon name="bulb-o" size="18" class="m-r-5" />温馨提醒：{{day}}天后服务到期，请及时续费以免影响正常发单！
            </div>
            <div class="bg-white radius8 user-info box-shadow">
                <div class="user-info-t flex align-center">
                    <img id="entry" ref="avatar" v-lazy="robotCfg.avatar" class="avatar">
                    <div class="m-l-10 flex-sub flex flex-direction min-width0">
                        <div class="flex align-center justify-between">
                            <span class="nickname font-16 van-ellipsis">{{ robotCfg.nickname }}</span>
                            <div @click="openPage('/Pay')" class="open flex align-center justify-center">
                                <img src="https://h5.dhcc.wang/newprogram/wxRobot/billing_ic_open.png" alt="">
                                <span v-if="robotCfg.device_info && robotCfg.device_info.status">续费</span>
                                <span v-else>开通</span>
                            </div>
                        </div>
                        <div class="flex m-t-5 align-center">
                            <span v-if="robotCfg.device_info && robotCfg.device_info.expires_time"
                                class="font-12 color-9">有效期至: <span class="color-6 text-bold">{{
                                    robotCfg.device_info.expires_time |
                                    formateTime('Y.M.D') }}</span></span>
                            <span v-else class="font-12 color-9">开通{{ robotCfg.mac_title || '' }}，自动分享赚钱</span>
                            <span class="font-12 color-9 m-l-5" v-if="day && day > 0"><span class="color-6">(剩余可用{{ day
                            }}天)</span></span>
                            <span class="font-12 color-red m-l-5" v-if="day && day < 0">(已过期{{ -day
                            }}天)</span>
                        </div>

                    </div>

                </div>
                <div class="user-info-b flex align-center justify-between">
                    <div class="flex align-center">
                        <div class="wx-avatar">
                            <img v-if="robotCfg.device_info.small_head_img_url"
                                v-lazy="robotCfg.device_info.small_head_img_url" alt="">
                            <img v-else src="https://h5.dhcc.wang/newprogram/wxRobot/billing_ic_wechat.png" alt="">
                        </div>
                        <div class="flex-sub flex align-center font-12 van-ellipsis"
                            v-if="robotCfg.device_info && robotCfg.device_info.status">
                            <span class="flex align-center van-ellipsis">
                                <i class="van-ellipsis nickname-bind" style="max-width: 110px;">{{
                                    robotCfg.device_info.nick_name }}</i>
                                <i v-if="robotCfg.device_info.status == 4"
                                    class="wx-status online align-center flex"><van-icon name="wechat" size="16" /> 在线</i>
                                <i v-if="robotCfg.device_info.status == 2"
                                    class="wx-status unlogin align-center flex"><van-icon name="wechat" size="16" /> 未登录</i>
                                <i v-if="robotCfg.device_info.status == 3"
                                    class="wx-status offline align-center flex"><van-icon name="wechat" size="16" /> 离线</i>
                            </span>
                        </div>
                        <div v-else class="color-9 font-13">
                            未绑定微信
                        </div>
                    </div>
                    <span v-if="robotCfg.device_info.status == 4" @click="logout"
                        class="logout bg-white font-11 color-6">退出登录</span>
                    <span class="font-13 color-green" v-if="robotCfg.device_info && !robotCfg.device_info.status"
                        @click="popupType = 9; showPopup = true">登录微信</span>
                </div>
            </div>
            <!-- 未购买 -->
            <!-- status  1新设备,2未登陆,3离线,4在线,5设备过期 -->
            <div class=""
                v-if="(robotCfg.device_info && !robotCfg.device_info.status) || (robotCfg.device_info && robotCfg.device_info.status == 5)">
                <div class="btn-group-item flex align-center bg-green color-white login-btn"
                    @click="popupType = 9; showPopup = true">登录微信</div>
                <div class="text-center color-9 font-11 font-13 m-b-10 m-t-10" @click="popupType = 10; showPopup = true">
                    如何登录? <span class="color-0 m-l-10">《查看教程》</span>
                </div>
            </div>
            <div v-if="robotCfg.device_info && robotCfg.device_info.status && robotCfg.device_info.status != 4 && robotCfg.device_info.status != 5"
                class="wx-login m-t-10 p-30 bg-white radius8 text-center">
                <span class="color-b font-13">请先登录微信，微信在线才能正常发单</span>
                <div class="btn-group m-t-20 flex justify-center">
                    <div @click="changeWx(1)" class="btn-group-item flex align-center">
                        <img src="https://h5.dhcc.wang/newprogram/wxRobot/billing_button_handover.png" alt="">
                        <span>换号登录</span>
                    </div>
                    <div @click="handleLogin(0)" class="btn-group-item flex align-center m-l-30">
                        <img src="https://h5.dhcc.wang/newprogram/wxRobot/billing_button_wechat.png" alt="">
                        <span>登录微信</span>
                    </div>
                </div>
            </div>
            <template v-if="robotCfg.device_info && robotCfg.device_info.status == 4 && isBeianShow">
                <template>
                    <div class="wx-group m-t-20">
                        <div class="wx-group-title flex align-center justify-between question-tip">
                            <div ref="listCopyRef" class="text flex align-center text-bold">
                                已激活的发单群({{ totalGroupCount || 0 }}/30)
                                <van-popover v-model="showPopover" trigger="click" placement="bottom-start"
                                    get-container=".question-tip">
                                    <div class="font-12 color-9">激活的群【开启】才能使用发单等功能</div>
                                    <template #reference>
                                        <van-icon class="m-l-5 m-t-4 color-9" name="question-o" />
                                    </template>
                                </van-popover>
                            </div>
                            <div class="color-9 font-13 align-center flex" @click="syncList">
                                同步通讯录
                                <img :class="listRefresh ? 'rotate' : ''" src="@/assets/img/refresh-icon-gray.png">
                            </div>
                        </div>
                        <!-- <div class="font-12 color-9">
                            群成员人数共计约 {{ totalMemberCount }} 人
                        </div> -->
                        <div class="m-t-10"
                            v-if="robotCfg.device_info && robotCfg.device_info.total_time < 86400">
                            <van-notice-bar wrapable :scrollable="false">
                                <div class="count-down-content font-13 numberFont">
                                    微信号在线时间需满<b>24小时</b>可发群，<b>72小时</b>可发圈<br><van-count-down
                                        :time="(24 * 60 * 60 - robotCfg.device_info.total_time) * 1000" format="HH:mm:ss"
                                        @finish="countFinsh"> <template #default="timeData">
                                            <span class="colon">预计</span>
                                            <span class="block">{{ timeData.hours > 9 ? timeData.hours : ('0' +
                                                timeData.hours)
                                            }}</span>
                                            <span class="colon">时</span>
                                            <span class="block">{{
                                                timeData.minutes > 9 ? timeData.minutes : ('0' + timeData.minutes) }}</span>
                                            <span class="colon">分</span>
                                            <span class="block">{{
                                                timeData.seconds > 9 ? timeData.seconds : ('0' + timeData.seconds) }}</span>
                                            <span class="colon">秒后可发单</span>
                                        </template></van-count-down>
                                </div>
                            </van-notice-bar>
                        </div>
                        <div class="tabs m-t-10">
                            <div class="flex align-center radius8 tabs-box">
                                <div 
                                    class="flex flex-sub align-center justify-center radius4 tab-item text-center" 
                                    v-for="item in tabList" 
                                    :key="item.id"
                                    :class="item.id == currentType ? 'active' : ''"
                                    @click="handleChange(item)">
                                    {{ item.name }} <img class="new-icon m-l-5" src="https://img.huajuanyun.com/utools/2024/1127/1732685032269.png" width="28" v-if="item.id == 2">
                                </div>
                            </div>
                        </div>

                        <div class="wx-group-cont">
                            <div v-if="list.length > 0" class="group-list">
                                <template v-for="(item, index) in list">
                                    <div :key="index" class="list-item p-tb-12 flex align-center justify-between">
                                        <img class="group-img" v-lazy="item.small_head_img_url" alt="">
                                        <div class="list-item-m flex-sub flex flex-direction min-width0">
                                            <span class="van-ellipsis text-bold font-15">{{ item.nick_name || '未命名'
                                            }}</span>
                                            <div @click="openPage('/CollectManage', item)"
                                                class="collect flex align-center">
                                                <span class="text color-9 van-ellipsis" v-if="item.user_name_source_info">
                                                    <van-tag round type="warning" size="small"><van-icon name="edit" />
                                                        更改群</van-tag>
                                                    {{ item.user_name_source_info.group_name ||
                                                        item.user_name_source_info.nick_name || '未命名' }}
                                                </span>
                                                <span class="text color-9 van-ellipsis" v-else>
                                                    <van-tag round type="success" size="small"><van-icon name="exchange" />
                                                        绑定源头群</van-tag>
                                                </span>
                                            </div>
                                        </div>
                                        <template v-if="currentType === 1">
                                            <van-icon @click="delGroup(item.user_name)" name="delete" size="22"
                                                color="#BBBBBB" />
                                            <van-switch :value="item.status == 1 ? true : false" @input="editGroup(item)"
                                                size="20" :active-color="main_color" />
                                        </template>
                                    </div>
                                </template>
                            </div>
                            <div v-else class="empty color-c text-center">
                                <img src="https://h5.dhcc.wang/newprogram/wxRobot/nodata.png" width="50%">
                                <div class="empty-text font-12">暂无激活的群~<br />请将群保存到通讯录后 点击下方新增发单群</div>
                            </div>
                            <div v-if="list.length > 5" @click="showMore = !showMore"
                                class="load-more padding-bottom-xs flex justify-center align-center color-b font-12">
                                <span v-if="showMore">点击收起</span>
                                <span v-else>查看全部</span>
                                <van-icon :name="showMore ? 'arrow-up' : 'arrow-down'" color="#BBBBBB" />
                            </div>
                            <div v-if="list.length < 30"
                                class="wx-group-bottom flex justify-center align-center bg-green cu-btn color-white"
                                @click="openPage('/groupList')">
                                <van-icon name="add-o" size="18" class="m-r-10" />{{ currentType == 1 ? '新增发单群' : '管理自定义跟群' }}
                            </div>
                        </div>
                    </div>
                </template>
            </template>
            <div v-if="robotCfg.device_info && robotCfg.device_info.status == 4 && isBeianShow">
                <div class="font-15 text-bold m-t-20 m-b-10">常用功能</div>
                <div class="bg-white radius8 p-b-10 p-lr-8 flex justify-between flex-wrap">
                    <div class="bottom-list m-t-10" v-for="item in bottomList" :key="item.id" :style="item.bgColor"
                        @click="openPage(item.path)">
                        <div class="font-14 text-bold m-l-10">{{ item.name }} <img class="isNew" src="https://img.huajuanyun.com/utools/2024/1127/1732685032269.png" width="28" v-if="item.id == 3"></div>
                        <img width="30" :src="item.icons" alt="">
                    </div>
                </div>
            </div>
            <div class="bg-white radius8 p-tb-5 p-lr-12 m-t-10 font-12 base-rule"
                v-if="robotCfg.device_info.status != 4 || !isBeianShow">
                <h3 class="font-14 m-tb-5">💖温馨提示</h3>
                <p>1、首次使用{{ robotCfg.mac_title || '' }}，需登录微信后短暂养号，在线时间<strong class="color-red">满24小时候可发群，</strong><strong
                        class="color-red">满72小时候可发圈</strong></p>
                <p>2、如果“微信安全提醒”发表朋友圈异常，关闭朋友圈发单，不要退出登录，挂机3-5天，再打开自动发圈功能。</p>
                <p>3、登陆{{ robotCfg.mac_title || '' }}之后，请不要将微信在其他设备登陆，以免掉线影响正常发单！</p>
                <p>4、若掉线频繁，请务必保持登陆{{ robotCfg.mac_title || '' }}的微信，长期处于网络连接状态！</p>
            </div>
            <div v-if="robotCfg.mac_use_tutorial_img" @click="openPage('/Rules')" class="bottom-img">
                <img v-lazy="robotCfg.mac_use_tutorial_img" alt="">
            </div>
        </div>
        <div v-if="robotCfg.mac_notice" class="notice-bar">
            <van-notice-bar :text="robotCfg.mac_notice" left-icon="info-o" mode="closeable" />
        </div>
        <!-- 弹窗 -->
        <custom-popup v-if="showPopup" :popup-visible.sync="showPopup" :type="popupType" :qrcode-img="QRcode"
            :scan-info="scanInfo" @confrim="submit" @close="closePopup" />

    </div>
</template>

<script>
import { Toast, CountDown, NoticeBar, Grid, GridItem, Popover, Icon, Switch, Tag } from 'vant'
import CustomPopup from '@/components/CustomPopup.vue'
export default {
    components: {
        CustomPopup,
        [Toast.name]: Toast,
        [CountDown.name]: CountDown,
        [NoticeBar.name]: NoticeBar,
        [Grid.name]: Grid,
        [GridItem.name]: GridItem,
        [Popover.name]: Popover,
        [Icon.name]: Icon,
        [Switch.name]: Switch,
        [Tag.name]: Tag
    },
    data() {
        return {
            bgStyle: '',
            reload: false,
            listRefresh: false,
            showPopup: false,
            popupType: 0, // 0=退出登录，1=未开通，2=换号登录，3=登录，4=唤醒微信登录，5=登录失败重试，6=指令绑定群，7=微信已扫描,9未开通时登录，10查看教程
            QRcode: '', // 二维码图片
            scanInfo: {}, // 扫描后用户信息
            timer: null,
            robotCfg: '',
            list: [], // 群列表
            showMore: false,
            count: 0,
            lock: false,
            open: false,
            main_color: '',
            assist_color: '',
            areaData: {},
            changeLogin: 0,
            countDownTime: 0,
            showCountDown: false,
            showPopover: false,
            bottomList: [
                {
                    name: '微信群发单',
                    icons: 'https://img.huajuanyun.com/utools/2023/1010/1696921037068.png',
                    bgColor: 'background: #e6fff3; color: #19c04c',
                    id: 1,
                    path: '/CollectManage'
                },
                {
                    name: '朋友圈发单',
                    icons: 'https://img.huajuanyun.com/utools/2023/1010/1696921926189.png',
                    bgColor: 'background: #f9e1ff; color: #a63cc7',
                    id: 4,
                    path: '/followFriends'
                },
                {
                    name: '自定义跟群',
                    icons: 'https://img.huajuanyun.com/utools/2023/1010/1696921392200.png',
                    bgColor: 'background: #fce1e9; color: #fa3d76',
                    id: 3,
                    path: '/followGroup'
                },
                {
                    name: '源头群预览',
                    icons: 'https://img.huajuanyun.com/utools/2024/1127/1732687196269.png',
                    bgColor: 'background: #e4f6fc; color: #2569cb',
                    id: 8,
                    path: '/sourcePreview'
                },
                {
                    name: '入群欢迎语',
                    icons: 'https://img.huajuanyun.com/utools/2023/1010/1696921179191.png',
                    bgColor: 'background: #fef1db; color: #ec7e09',
                    id: 2,
                    path: '/Group'
                },
                {
                    name: '关键词回复',
                    icons: 'https://img.huajuanyun.com/utools/2023/1010/1696921341190.png',
                    bgColor: 'background: #eaecff; color: #6266d8',
                    id: 5,
                    path: '/keywordList'
                },
                {
                    name: '个人号导购',
                    icons: 'https://img.huajuanyun.com/utools/2023/1010/1696921162190.png',
                    bgColor: 'background: #fce3da; color: #f95454',
                    id: 6,
                    path: '/personalGuide'
                },
                {
                    name: '数据罗盘',
                    icons: 'https://img.huajuanyun.com/utools/2023/129/1702132571658.png',
                    bgColor: 'background: #dcf2fa; color: #0bb1ed',
                    id: 7,
                    path: '/dataCompass'
                }
            ],
            appType: 'iOS',
            day: '',
            expireTimeDay: false,
            appInfo: {},
            submitNum: 0,
            devTeam: false, // 功能模块开发期间仅1019可见
            codeTimerNum: 180,
            codeTimer: null,
            totalGroupCount: 0,
            isBeianShow: true,
            currentType: 1,
            tabList: [{
                id: 1,
                name: '跟发官方源头群'
            }, {
                id: 2,
                name: '自定义跟群'
            }],
            totalMemberCount: 0
        }
    },
    activated() {
        this.init()
        this.setHeader()
    },
    mounted() {
        this.$common.getClientAppState().then(res => {
            const resData = JSON.parse(res)
            this.appInfo = resData
            this.appType = resData.AppType
            let nowCode = this.appInfo.codeVerson.split('v')[1]
            let version = this.appType == 'Android' ? '3.4.0.20230912' : '2.9.3.20230914'
            if (this.$common.compareVersion(nowCode, version) == -1) {
                this.popupType = 11
                this.showPopup = true
                return false
            }
        })
        this.DS.call('DS.setClipBoardEnabled', '0')
    },
    watch: {
        totalGroupCount(newTotal) {
            localStorage.setItem('totalGroupCount', newTotal.toString())
        },
        totalMemberCount(newTotalMemberCount) {
            localStorage.setItem('totalMemberCount', newTotalMemberCount.toString())
        }
    },
    // computed: {
    //     totalMemberCount() {
    //         if (this.list.length > 0) {
    //             return this.list.reduce((total, item) => total + item.member_count, 0)
    //         } else {
    //             return 0
    //         }
    //     }
    // },
    methods: {
        setHeader() {
            this.$common.setHeader({
                native_headershow: 0,
                topstyle: 'topcolor',
                native_top_words_color: '#ffffff',
                str_link_color: this.main_color,
                end_link_color: this.assist_color
            })
        },
        init(first = true) {
            this.devTeam = global.getUrlName('xid') == 'a03e07'
            this.submitNum = 0
            this.$api.wechatConfig({}, first).then(async res => {
                console.log(res)
                if (res.code != 1) {
                    this.$dialog.alert({
                        title: '温馨提示',
                        message: res.msg
                    }).then(() => {
                        this.back()
                    })
                    return
                }
                this.robotCfg = res.data
                this.$DB.set('robotCfg', this.robotCfg)
                this.main_color = res.data.mac_main_color
                this.assist_color = res.data.mac_assist_color
                this.bgStyle = `linear-gradient(90deg, ${this.main_color} 0%, ${this.assist_color} 100%)`
                this.setHeader()
                this.deviceInfo()
            }).finally(() => {
                setTimeout(() => {
                    this.reload = false
                }, 500)
            })
        },
        deviceInfo() {
            this.$api.deviceInfo().then(async res => {
                if (res.code == 1) {
                    this.robotCfg.device_info = res.data.device_info
                    if (res.data.device_info && res.data.device_info.expires_time && res.data.device_info.expires_time > 0) {
                        let nowTime = new Date().getTime()
                        let surDay = (res.data.device_info.expires_time * 1000) - nowTime
                        this.day = parseInt(surDay / (60 * 60 * 24 * 1000))
                        this.expireTimeDay = this.day < 5 && this.day > 0
                    }
                    await this.$nextTick()
                    if (res.data.device_info && res.data.device_info.status) {
                        if (res.data.device_info.status == 4) {
                            this.getList()
                        }
                    }
                    if (res.data.device_info && res.data.device_info.is_debug) {
                        if (this.isInclude('https://trace-api.dhcc.wang/page-spy/index.min.js')) {
                            return false
                        } else {
                            var script = document.createElement('script')
                            script.src = 'https://trace-api.dhcc.wang/page-spy/index.min.js'
                            script.crossOrigin = 'anonymous'
                            script.onload = function () {
                                window.$pageSpy = new PageSpy({
                                    autoRender: false,
                                    project: 'fadan',
                                    title: res.data.nickname + res.data.device_info.remark
                                })
                            }
                            document.head.appendChild(script)
                        }
                    }
                }
            })
        },
        async isBeian() {
            let isBeian = await this.taobaoBa(1)
            if (!isBeian) {
                this.isBeianShow = false
                return false
            }
            let pddBeian = await this.goBeian(4)
            if (!pddBeian) {
                this.isBeianShow = false
                return false
            }
            this.isBeianShow = true
        },
        taobaoBa(num) {
            return new Promise((resolve, reject) => {
                this.DS.call('DS.checkBeian', num, (v) => {
                    if(v!=0){
                        resolve(true)
                    }else{
                        resolve(false)
                    } 
                })
            })
        },
        goBeian(num) {
            return new Promise((resolve, reject) => {
                this.$api.checkBeian({ union_type: num }).then(res => {
                    console.log(res)
                    if (res.data.need_beian == 1) {
                        this.pddBeiAn(res.data.beian_urls.short_url, num)
                        resolve(false)
                    } else {
                        resolve(true)
                    }
                })
            })
        },
        pddBeiAn(url, type) {
            this.$dialog.confirm({
                title: '温馨提示',
                message: type == 4 ? '当前账号未进行拼多多授权，请先进行授权备案！' : '当前账号未进行淘宝授权，请先进行授权备案！'
            }).then(() => {
                this.DS.call('DS.openBuyLink', {
                    type,
                    url
                })
            }).catch(() => {
                // cancel
            })
        },
        // 判断js文件是否已经引入
        isInclude(name) {
            var js = /js$/i.test(name)
            var es = document.getElementsByTagName(js ? 'script' : 'link')
            for (var i = 0; i < es.length; i++) { if (es[i][js ? 'src' : 'href'].indexOf(name) != -1) return true }
            return false
        },
        getList(loading = false) {
            this.$api.getListGroup({ 
                group_type: 2, 
                status: -1, 
                page: 1, 
                pagesize: 30,
                follow_type: this.currentType == 1 ? 1 : 3
             }, loading).then(async res => {
                if (res.code != 1) {
                    return this.$toast(res.msg)
                }
                const {send_group_count = 0, source_group_count = 0, send_member_count = 0} = res.data
                this.list = res.data.list
                this.totalGroupCount = send_group_count
                this.totalMemberCount = send_member_count || 0
                await this.$nextTick()
            }).finally(() => {
                setTimeout(() => {
                    this.listRefresh = false
                }, 300)
            })
        },
        // 同步联系人
        syncList() {
            this.listRefresh = true
            this.$api.syncContact({}).then(async res => {
                if (res.code != 1) {
                    return this.$toast(res.msg)
                }
                this.getList()
            }).finally(() => {
                setTimeout(() => {
                    this.$toast('同步请求已发送\n请稍后重新查看')
                    this.listRefresh = false
                }, 300)
            })
        },
        delGroup(id) {
            this.$dialog.confirm({
                title: '温馨提示',
                message: '确定从列表中删除此群吗？'
            }).then(() => {
                this.$api.updateGroup({ username: id, group_type: 0 }).then(res => {
                    if (res.code != 1) {
                        return this.$toast(res.msg)
                    }
                    this.$toast('删除成功')
                    setTimeout(() => {
                        this.getList()
                    }, 800)
                })
            })
        },
        editGroup(item) {
            this.$api.updateGroup({
                status: item.status ? 0 : 1,
                username: item.user_name,
                username_source: item.user_name_source,
                group_type: 2
            }).then(res => {
                if (res.code != 1) {
                    this.$toast(res.msg)
                    return
                }
                this.$toast('操作成功')
                item.status = !item.status
            })
        },
        refresh() {
            this.reload = true
            this.init()
        },
        async handleLogin(type) {
            this.changeLogin = type
            if (!this.robotCfg) { // 未开通
                this.popupType = 1
                this.showPopup = true
                return
            }
            this.loginQrcode = {}
            this.submitNum = 0
            if (this.robotCfg && this.robotCfg.device_info && this.robotCfg.device_info.status == 3) {
                this.noticLogin()
            } else {
                this.qrcodeLogin()
            }
        },
        // 二维码登录
        qrcodeLogin() {
            this.loginQrcode = {}
            this.$api.getLoginQrcodePack({}).then(res => {
                if (res.code != 1) {
                    return this.$toast(res.msg)
                }
                let obj = {
                    'type': '1',
                    'url': res.data.url,
                    'headers': JSON.stringify(res.data.headers)
                }
                if (this.appType == 'iOS') {
                    obj.body = res.data.body
                } else {
                    obj.params = res.data.body
                }

                if (res.data.body) {
                    this.DS.call('DS.startJSRequest', obj, (v) => {
                        if (v && v.indexOf('-1:::') == -1) {
                            this.$api.getLoginQrcode({
                                body: v,
                                hash_data: res.data.hash_data,
                                key: res.data.key
                            }).then(opt => {
                                if (opt.code != 1) {
                                    return this.$toast(opt.msg)
                                }
                                if (opt.data && opt.data.uuid) {
                                    this.codeTimerNum = 180
                                    opt.data.qrcode.buffer = 'data:image/png;base64,' + opt.data.qrcode.buffer
                                    this.QRcode = opt.data.qrcode.buffer
                                    this.popupType = 3
                                    this.showPopup = true

                                    this.loginQrcode = opt.data
                                    this.getLoginStatus()
                                    this.timer = setInterval(() => {
                                        this.getLoginStatus()
                                    }, 1000 * 1.5)
                                    this.codeTimer = setInterval(() => {
                                        if (this.codeTimerNum == 0) {
                                            this.codeTimer && clearInterval(this.codeTimer)
                                            this.timer && clearInterval(this.timer)
                                            this.timer = null
                                            this.codeTimer = null
                                            this.qrcodeLogin()
                                        } else {
                                            this.codeTimerNum--
                                        }
                                    }, 1000)
                                } else {
                                    this.$dialog.alert({
                                        title: '错误提示',
                                        message: '接口异常，请联系客服'
                                    }).then(() => {

                                    })
                                }
                            })
                        } else {
                            this.$dialog.alert({
                                title: '错误提示',
                                message: v || '接口异常，请稍后重试'
                            }).then(() => {

                            })
                        }
                    })
                } else {
                    this.$dialog.alert({
                        title: '错误提示',
                        message: '返回数据为空，请稍后重试'
                    }).then(() => {

                    })
                }
            })
        },
        // 通知登录
        noticLogin() {
            this.loginQrcode = {}
            this.$api.getPushLoginUrlPack({}).then(res => {
                if (res.code != 1) {
                    this.qrcodeLogin()
                    // this.$toast(res.msg)
                    return
                }
                let obj = {
                    'type': '1',
                    'url': res.data.url,
                    'headers': JSON.stringify(res.data.headers)
                }
                if (this.appType == 'iOS') {
                    obj.body = res.data.body
                } else {
                    obj.params = res.data.body
                }
                if (res.data.body) {
                    this.DS.call('DS.startJSRequest', obj, (v) => {
                        if (v && v.indexOf('-1:::') == -1) {
                            this.$api.getPushLoginUrl({
                                body: v,
                                hash_data: res.data.hash_data,
                                key: res.data.key
                            }).then(opt => {
                                if (opt.code != 1) {
                                    this.$toast(opt.msg)
                                    this.qrcodeLogin()
                                    // this.$toast(res.msg)
                                    return
                                }
                                if (opt.data && opt.data.uuid) {
                                    this.popupType = 4
                                    this.showPopup = true
                                    this.loginQrcode = opt.data
                                    this.getLoginStatus()
                                    this.timer = setInterval(() => {
                                        this.getLoginStatus()
                                    }, 1000 * 1.5)
                                } else {
                                    this.$dialog.alert({
                                        title: '错误提示',
                                        message: '接口异常，请联系客服'
                                    }).then(() => {

                                    })
                                }
                            })
                        } else {
                            this.$dialog.alert({
                                title: '错误提示',
                                message: v || '接口异常，请稍后重试'
                            }).then(() => {

                            })
                        }
                    })
                } else {
                    this.$dialog.alert({
                        title: '错误提示',
                        message: '返回数据为空，请稍后重试'
                    }).then(() => {

                    })
                }
            })
        },
        logout() {
            this.popupType = 0
            this.showPopup = true
        },
        changeWx() {
            this.changeLogin = 1
            this.popupType = 2
            this.showPopup = true
        },
        async getLoginStatus() {
            await this.$api.getCheckLoginQrcodePack({ uuid: this.loginQrcode.uuid }, false).then(async res => {
                if (res.code != 1) {
                    this.$dialog.alert({
                        title: '错误提示',
                        message: res.msg
                    }).then(() => {
                        this.closePopup(3)
                    })
                    return
                }
                let obj = {
                    'type': '1',
                    'url': res.data.url,
                    'headers': JSON.stringify(res.data.headers)
                }
                if (this.appType == 'iOS') {
                    obj.body = res.data.body
                } else {
                    obj.params = res.data.body
                }
                if (res.data.body) {
                    await this.DS.call('DS.startJSRequest', obj, (v) => {
                        if (v && v.indexOf('-1:::') == -1) {
                            this.$api.getCheckLoginQrcode({
                                body: v,
                                hash_data: res.data.hash_data,
                                key: res.data.key,
                                uuid: this.loginQrcode.uuid
                            }, false).then(opt => {
                                if (opt.code != 1) {
                                    this.$dialog.alert({
                                        title: '错误提示',
                                        message: opt.msg
                                    }).then(() => {
                                        this.closePopup(3)
                                    })
                                    return
                                }
                                let status = opt.data.notify.status // 0=未扫码,1=已扫码等待确认,2=已确认,4=已取消登录
                                if (status == 1) {
                                    this.scanInfo = opt.data
                                    this.popupType = 7
                                    this.showPopup = true
                                } else if (status == 2) {
                                    this.timer && clearInterval(this.timer)
                                    this.timer = null
                                    this.codeTimer && clearInterval(this.codeTimer)
                                    this.codeTimer = null
                                    this.showPopup = false
                                    this.submits()
                                } else if (status == 4) {
                                    this.$toast('已取消登录')
                                    this.timer && clearInterval(this.timer)
                                    this.timer = null
                                    this.codeTimer && clearInterval(this.codeTimer)
                                    this.codeTimer = null
                                    this.showPopup = false
                                }
                            }).catch(() => {
                                this.$dialog.alert({
                                    title: '错误提示',
                                    message: v || '接口异常，请重新登录'
                                }).then(() => {
                                    this.closePopup(3)
                                })
                            })
                        } else {
                            this.$dialog.alert({
                                title: '错误提示',
                                message: v || '接口异常，请稍后重试'
                            }).then(() => {
                                this.closePopup(3)
                            })
                        }
                    })
                } else {
                    this.$dialog.alert({
                        title: '错误提示',
                        message: '返回数据为空，请稍后重试'
                    }).then(() => {
                        this.closePopup(3)
                    })
                }
            })
        },
        // 提交登录
        submits() {
            this.$api.getManualAuthPack({}).then(res => {
                if (res.code != 1) {
                    if (res.msg == '[MM_ERR_IDC_REDIRECT]error') {
                        this.submitNum++
                        if (this.submitNum < 6) {
                            setTimeout(() => {
                                this.submits()
                            }, 500)
                        } else {
                            return this.$toast(res.msg)
                        }
                    } else {
                        return this.$toast(res.msg)
                    }
                }
                let obj = {
                    'type': '1',
                    'url': res.data.url,
                    'headers': JSON.stringify(res.data.headers)
                }
                if (this.appType == 'iOS') {
                    obj.body = res.data.body
                } else {
                    obj.params = res.data.body
                }
                if (res.data.body) {
                    this.DS.call('DS.startJSRequest', obj, (v) => {
                        if (v && v.indexOf('-1:::') == -1) {
                            this.$api.getManualAuth({
                                body: v,
                                hash_data: res.data.hash_data,
                                key: res.data.key
                            }).then(opt => {
                                if (opt.code != 1) {
                                    if (opt.msg == '[MM_ERR_IDC_REDIRECT]error') {
                                        this.submitNum++
                                        if (this.submitNum < 6) {
                                            setTimeout(() => {
                                                this.submits()
                                            }, 500)
                                        } else {
                                            return this.$toast(opt.msg)
                                        }
                                    } else {
                                        return this.$toast(opt.msg)
                                    }
                                }

                                this.submitNum = 0
                                this.$toast('登录成功')
                                this.init()
                            })
                        } else {
                            this.$dialog.alert({
                                title: '错误提示',
                                message: v || '接口异常，请稍后重试'
                            }).then(() => {

                            })
                        }
                    })
                } else {
                    this.$dialog.alert({
                        title: '错误提示',
                        message: '返回数据为空，请稍后重试'
                    }).then(() => {

                    })
                }
            })
        },
        closePopup(type) {
            if (type == 3 || type == 7) {
                this.timer && clearInterval(this.timer)
                this.timer = null
                this.codeTimer && clearInterval(this.codeTimer)
                this.codeTimer = null
                this.init()
            } else if (type == 4 || type == 5) {
                this.init()
            } else if (type == 11) {
                this.back()
            }
            this.showPopup = false
        },
        submit(type) {
            if (type == 0) {
                this.showPopup = false
                this.$api.wxLogout().then(res => {
                    this.init()
                })
            } else if (type == 1 || type == 9) {
                this.showPopup = false
                this.openPage('/Pay')
            } else if (type == 2) {
                this.showPopup = false
                this.$api.wxLogout().then(res => {
                    this.qrcodeLogin()
                })
            } else if (type == 4) {
                this.showPopup = false
                // this.getIndexData('wake')
            } else if (type == 5) {
                this.showPopup = false
            } else if (type == 6) {
                this.showPopup = false
                this.DS.call('DS.copyToClipboard', this.robotCfg.mac_start_command)
                // this.DS.call('DS.chatWithWeixin');   // 拉起微信
            } else if (type == 7) {
                this.showPopup = false
                this.init()
            } else if (type == 11) {
                this.showPopup = false
                this.back()
            } else if (type == 200) {
                this.QRcode = ''
                this.timer && clearInterval(this.timer)
                this.codeTimer && clearInterval(this.codeTimer)
                this.codeTimer = null
                this.qrcodeLogin()
            }
        },
        async openPage(page, params) {
            if (!page) return
            if (page == '/CollectManage' && params) {
                if (this.currentType === 1) { // 官方源头群
                    this.$router.push({
                        path: page,
                        query: {
                            username: encodeURIComponent(params.user_name)
                        }
                    })
                } else {
                    this.$router.push({
                        path: '/addAutoFollow',
                        query: {
                            username: encodeURIComponent(params.user_name_source)
                        }
                    })
                }
                return
            }
            if (page == '/Pay') {
                let isBeian = await this.taobaoBa(1)
                if (!isBeian) {
                    this.isBeianShow = false
                    return false
                }
                let pddBeian = await this.goBeian(4)
                if (!pddBeian) {
                    this.isBeianShow = false
                    return false
                }
                this.isBeianShow = true
            }
            if (page == '/sourcePreview') {
                let theUrl = `https://h5.dhcc.wang/page/wxGroup/index.html?xid=${getUrlName('xid')}`
				this.DS.call('DS.openPage', {
					page: 'H5Page',
					params: {
						newH5Url: theUrl
					}
				})
                return
            }
            if (page == '/groupList' && this.currentType === 2) { // 新增自定义跟群
                this.$router.push({
                    path: '/followGroup'
                })
                return
            }
            this.$router.push({
                path: page,
                query: {
                    params: JSON.stringify(params)
                }
            })
        },
        back() {
            this.DS.call('DS.closePage')
        },
        // 功能模块跳转
        toFnPage(item) {
            if (item.page) {
                this.$router.push({
                    path: item.page
                })
            }
        },
        countFinsh() {
            this.robotCfg.device_info.total_time = 86401
        },
        handleChange (item) {
            if (this.currentType == item.id) return
            this.currentType = item.id
            this.getList(true)
        }
    }
}
</script>
<style lang="css">
.area-dialog .van-dialog__header {
    font-size: 18px;
    font-weight: 600;
    color: #ee0a24;
}
</style>
<style lang="less" scoped>
.cont {
    font-size: 14px;
    padding: 46px 0px 12px;

    &-main {
        margin-top: -1px;
        padding: 12px 12px 0;
        position: relative;
        height: 70px;
        border-radius: 0 0 30% 30%;
    }

    .expireTips {
        border-radius: 100px;
        margin-bottom: 10px;
        color: #fff;
        text-align: center;
        padding: 5px 12px;
        color: rgb(255, 112, 0);
        border-color: rgb(255, 112, 0);
        background-color: rgb(255, 244, 236);
    }

    .notice-bar {
        position: fixed;
        bottom: 0;
        width: 100%;

        /deep/ .van-notice-bar {
            padding: 0px 10px;
        }
    }

    .user-info {
        padding: 15px 12px;
        background-image: url(https://img.huajuanyun.com/utools/2023/928/1695863842551.png);
        background-size: cover;
        background-repeat: no-repeat;

        &-t {
            .avatar {
                width: 44px;
                height: 44px;
                border-radius: 50%;
            }

            .open {
                padding: 4px 12px;
                background: linear-gradient(334deg, #2a211d, #524135);
                color: #fee0b8;
                border-radius: 100px;

                img {
                    width: 16px;
                    height: 16px;
                    margin-right: 2px;
                }
            }
        }

        &-b {
            margin-top: 15px;
            padding: 6px 12px;
            background: rgba(0, 0, 0, .05);
            border-radius: 20px;

            .wx-avatar {
                width: 22px;
                height: 22px;
                margin-right: 5px;

                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }

            .nickname-bind {
                margin-right: 5px;
                margin-left: 3px;
                font-weight: bold;
            }

            .wx-status {
                color: #fff;
                border-radius: 4px;
                padding: 1px 5px;
                font-size: 12px;
                transform: scale(0.9);
            }

            .online {
                background: #04BE02;
            }

            .offline {
                background: #fa3534;
            }

            .unlogin {
                background: #aaa;
            }

            .logout {
                padding: 2px 8px;
                border-radius: 20px;
            }
        }
    }

    .base-rule {
        p {
            color: #555555;
            margin: 8px 0;
        }
    }

    .wx-login {
        .btn-group {
            &-item {
                padding: 7px 24px;
                border-radius: 50px;
                // border: 1px solid #CCCCCC;
                background: #f9f9f9;
                color: #666;

                img {
                    width: 16px;
                    height: 16px;
                    margin-right: 5px;
                }

                &:nth-of-type(2) {
                    background: linear-gradient(90deg, #04BE02 0%, #0ccd0a 100%);
                    border: none;
                    color: #fff;
                }
            }
        }

        .btn-success {
            background: linear-gradient(90deg, #04BE02 0%, #0ccd0a 100%);
            border: none;
            color: #fff;
        }
    }

    .wx-group {
        position: relative;

        &-title {
            position: relative;
            font-size: 15px;

            .color {
                // content: '';
                position: absolute;
                left: 0;
                width: 2px;
                height: 14px;
                border-radius: 2px;
            }

            img {
                width: 20px;
                height: 20px;
            }
        }

        &-cont {

            .list-item {
                background-color: #ffffff;
                border-radius: 8px;
                margin: 10px 0;
                padding: 10px;

                .van-icon-delete {
                    margin-right: 12px;
                }

                .group-img {
                    width: 50px;
                    height: 50px;
                    border-radius: 2px;
                }

                &-m {
                    padding: 0 10px;

                    .collect {
                        margin-top: 6px;
                    }

                    .text {
                        font-size: 12px;
                    }

                    em {
                        background: linear-gradient(90deg, rgb(255, 230, 145) 0%, rgb(255, 224, 110) 100%) rgb(255, 227, 180);
                        color: #934519;
                        border: 1px solid #e68d5a;
                        border-radius: 2px;
                        width: 15px;
                        height: 15px;
                        line-height: 15px;
                        font-weight: bold;
                        text-align: center;
                        margin-right: 5px;
                        display: inline-block;
                    }

                    .platform {
                        width: 12px;
                        min-width: 12px;
                        height: 12px;
                        margin-right: 5px;
                    }

                    .edit {
                        margin-left: 5px;
                        width: 32px;
                        min-width: 32px;
                        height: 16px;
                        line-height: 16px;
                        border-radius: 3px;
                        border: 1px solid #cc5806;
                        background: linear-gradient(90deg, rgb(255, 230, 145) 0%, rgb(255, 224, 110) 100%) rgb(255, 227, 180);
                        font-size: 11px;
                        font-weight: bold;
                        color: #934519;
                        transform: scale(0.85);
                    }
                }
            }

            .empty {


                &-text {
                    margin-top: -5px;
                }
            }
        }

        &-bottom {
            margin-top: 15px;
            padding: 10px 60px;
            border-radius: 50px;
        }

        /deep/ .van-notice-bar {
            padding: 5px 10px;
            border-radius: 5px;
            text-align: center;
            background: none;
            color: #eb2a2a;
        }

        /deep/.van-notice-bar__content {
            width: 100%;
        }

        .count-down-content {
            .block {
                background-image: linear-gradient(to bottom, #45484d 0%, #000000 100%);
                color: #fff;
                text-align: center;
                width: 35px;
                padding: 2px 0;
                border-radius: 2px;
                display: inline-block;
                font-size: 18px;
            }

            .colon {
                margin: 0 5px;
                color: #333;
                font-size: 14px;
                // color: #ed6a0c;
            }
        }

        ::v-deep .van-count-down {
            display: inline;
        }
    }

    .bottom-img {
        padding: 10px 0px 60px;

        img {
            width: 100%;
        }
    }

    .extend {
        &-item {
            padding: 15px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .van-icon-arrow {
                color: #999;
            }
        }
    }

    .account {
        flex-flow: row wrap;
        padding: 0px 0px 12px;
        height: 82px;
        overflow-y: hidden;

        &.open {
            height: 100%;
            overflow-y: auto;
        }

        &-item {
            width: 25%;
            margin-top: 12px;

            .avatar {
                position: relative;

                img {
                    width: 44px;
                    height: 44px;
                    border-radius: 50%;
                }

                .status {
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    bottom: 0;
                    font-size: 9px;
                    width: 30px;
                    height: 12px;
                    line-height: 12px;
                    text-align: center;
                }

                &.online {
                    .status {
                        background: #04BE02;
                        color: #fff;
                    }
                }

                &.offline {
                    img {
                        filter: grayscale(.6);
                    }

                    .status {
                        background: #ccc;
                        color: #999;
                    }
                }
            }

            .nickname {
                max-width: 100%;
                margin-top: 5px;
                color: #666;
            }
        }
    }

    .count-down {
        .colon {
            display: inline-block;
            margin: 0px 4px;
            font-size: 12px;
            color: #999;
        }

        .block {
            display: inline-block;
            width: 22px;
            // padding: 2px 0;
            text-align: center;
            font-size: 15px;
            background-color: #ee0a24;
            color: #fff;
            border-radius: 4px;
        }
    }

    .tabs {
        &-box {
            padding: 5px;
            background: rgba(0, 0, 0, .05);
            .tab-item {
                height: 32px;
                &.active {
                    font-weight: 600;
                    background: #ffffff;
                }
                .new-icon {
                    animation: moveUpDown2 1s infinite;
                }
            }
        }
    }

}

::v-deep .van-popover__content {
    border-radius: 2px;
    padding: 3px 5px;
}

.login-btn {
    padding: 10px 0;
    width: 60vw;
    margin: 30px auto 10px;
    justify-content: center;
    border-radius: 30px;
}
@keyframes moveUpDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}
@keyframes moveUpDown2 {
  0%, 100% { transform: translateY(-8px); }
  50% { transform: translateY(-6px); }
}
.bottom-list {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-radius: 6px;
    width: calc(50.0vw - 45px);
    .isNew {
        position: absolute;
        right: 25%;
        top: 3px;
        image-rendering: -webkit-optimize-contrast;
        animation: moveUpDown 1s infinite;
    }
}
</style>